<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>管理所有图片</title>
    <a th:href="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/'} " id="contextPath"></a>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/managerpic.css">
    <script src="js/managerpic.js"></script>
</head>
<body>

<div class="layui-row layui-col-space10">
    <div class="layui-col-md8 layui-col-md-offset2">
        <h2 style="display : inline"><a href="/UserManager">用户管理</a></h2><h1 style="display : inline">图片管理</h1><h2 style="display : inline"><a href="/UploadPic">图片上传</a></h2><br>
        <h2>登录用户：
            <span th:if="${username} != null">
                <span th:text="${username}">用户名</span>
            </span>
            <span th:if="${username} == null">未登录</span>
        </h2>

        <div class="managerList">
            <div th:if="${username} != null">
                <div class="piclist">

                    <div class="pic" th:each="pic,picStat:${picList}" th:id="'picId'+${pic.picId}">
                        <div class="picimg">
                            <img th:lay-src="@{/loadpicfile/{picId}-{picName}.{picType}(picId=${pic.picId},picName=${pic.picName},picType=${pic.picType})}">
                        </div>
                        <span class="picname" th:title="${pic.picName}"  >图片名：<span class="pictitle layui-elip" th:text="${pic.picName}"></span></span>
                        <span class="picsize" th:text="'图片大小:'+${pic.picSize}+'kb'">图片大小:100kb</span>
                        <span class="pictype" th:text="'图片类型:'+${pic.picType}">图片类型:GIF</span>
                        <form class="layui-form" action="">
                            <div class="layui-form-item select">
                                <label class="layui-form-label selecttitle">访问权限</label>
                                <div class="layui-input-block selsectlist">
                                    <select th:id="'selectid'+${pic.picId}" th:lay-filter="${pic.picId}" name="value"  th:onchange="'changeselect('+${pic.picId}+')'" lay-verify="required">
<!--                                        <option value="0">允许查看</option>-->
<!--                                        <option value="1">禁止查看</option>-->
                                    </select>
                                </div>
                            </div>
                        </form>
                        <textarea placeholder="备注内容" class="layui-textarea remark" rows="2" th:title="${pic.picRemark}" th:text="${pic.picRemark}" th:onblur="'saveremark('+${pic.picId}+')'"></textarea>
                        <button type="button" class="layui-btn layui-btn-primary btnUrl" th:onclick="'copyurl('+${pic.picId}+')'">查看图片地址</button>
                        <button type="button" class="layui-btn layui-btn-danger brnDelete" th:onclick="'deletepic('+${pic.picId}+')'">删除图片</button>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
</body>
<script th:inline="javascript">
    layui.use(['upload','form','flow'], function(){
        var upload = layui.upload;
        var form = layui.form;
        var flow = layui.flow;
        flow.lazyimg();

        var jsonPicList = [[${jsonPicList}]];
        var PicList = JSON.parse(jsonPicList);
        var selectdom = [];
        for (var i = 0;i<PicList.length;i++)
        {
            var picId = PicList[i].picId;
            var select = $("#selectid"+picId);
            var option1 = document.createElement('option');
            var option2 = document.createElement('option');
            if (PicList[i].picStatus==0) {
                option1.value = 0;
                option1.textContent = "允许查看";
                select.append(option1);
                option2.value = 1;
                option2.textContent = "禁止查看";
                select.append(option2);
            }
            else {
                option1.value = 1;
                option1.textContent = "禁止查看";
                select.append(option1);
                option2.value = 0;
                option2.textContent = "允许查看";
                select.append(option2);
            }
            // form.on('select('+picId+')', function(data){
            //     // selectdom[i] = data.othis;
            //     // data.othis.on('change',changeSelectListener(picId));
            //     $(data.elem).trigger()
            // });
            form.on('select('+picId+')', function(data){
                $(data.elem).trigger('change',data.elem);
            });
        }
        // for (var i = 0;i<PicList.length;i++)
        // {
        //     selectdom[i].on('change',changeSelectListener(PicList[i].picId));
        // }

        form.render();


    });
</script>
</html>